<template>
    <div>
        <section class="cars-item">
            <header>
                <h4 class="cars-logo">
                    <img src="../../assets/images/cars-logo.png" alt="汽车">
                    <span class="name">新能源汽车 2019款</span>
                </h4>
                <p class="cars-attr">新能源汽车 5座</p>
            </header>
            <div class="cars-content">
                <div class="car-info">
                    <h3>粤 B745N8</h3>
                    <div class="energy-box">
                        <ul>
                            <li class="active"></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                        <div class="detail">
                            <sub>约</sub><b>600</b><sub>km</sub>
                        </div>
                    </div>
                </div>
                <div class="car-img">
                    <img :src="require('@/assets/images/pic001.jpg')" alt="新能源汽车 5座">
                </div>
            </div>
            <footer>
                <span>某某停车场</span>
                <i class="i-to-right"></i>
            </footer>
        </section>

        <section class="cars-item cars-detail">
            <div class="cars-detail-box">
                <header>
                    <div class="title">
                        <h3>某某停车场</h3>
                        <i>×</i>
                    </div>
                    <h4 class="cars-logo">
                        <img src="../../assets/images/cars-logo.png" alt="汽车">
                        <span class="name">新能源汽车 2019款</span>
                    </h4>
                    <p class="cars-attr">新能源汽车 5座</p>
                </header>
                <div class="car-img">
                    <img :src="require('@/assets/images/pic001.jpg')" alt="">
                </div>
                <div class="info">
                    <div class="number-plate">粤B745N8</div>
                    <div class="energy">
                        <sub>约</sub><span>600</span><sub>km</sub>
                    </div>
                </div>
                <div class="energy-box">
                    <div class="schedule-box">
                        <div class="schedule"></div>
                    </div>
                </div>
                <div class="prompt">
                    取车约支付12元停车费，实际补贴12元
                </div>
                <ul class="type-list">
                    <li v-for="item in 10" :key="item" class="list-item">
                        <span class="key">日租车</span>
                        <span class="val">￥300/1天</span>
                    </li>
                </ul>
                <div style="height: 42px"></div>
            </div>

            <button class="reservation">预约用车</button>
        </section>
    </div>
</template>

<script>
    export default {
        name: "carList"
    }
</script>

<style lang="scss" scoped>
    @import "index";
</style>